import React, { Component } from 'react';
// 引入ant-design UI组件
import { NavBar, Carousel, Flex } from "antd-mobile"
// 引入搜索search界面组件
import SearchInput from "../searchInput/SearchInput"
// 引入axios
import myaxios from '../../utile/myaxios';
import { withRouter } from "react-router-dom";
import "./index.scss"
import axios from "axios"
class index extends Component {
    constructor(props){
        super(props);
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    state = {
        swiper_list: [],
        imgHeight: 176,
        classification: [],  //首页分类数据
        pictureList: [], //首页图片数据    
    }
    handleSwiperClisk = (id) => {
        // console.log(good_id);
        this.props.history.push("/goodDetail/" + id)
    }
    handleClassification = (params) => {
        this.props.history.push("/category")
    }
    handleImgClick =(params) => {
        this.props.history.push('/goodList/query="123"')
    }
    

    componentDidMount() {
        // 轮播图
        myaxios.get("home/swiperdata",{
            cancelToken:this.source.token
        }).then((res) => {
            this.setState({
                swiper_list: res,
            })
        }).catch((err) => console.log(err));
        // 导航
        myaxios.get("home/catitems",{
            cancelToken:this.source.token
        }).then((res) => {
            console.log(res);
            this.setState({
                classification: res,
            })
        }).catch((err) => {
            console.log(err);
        })
        // 图片列表
        myaxios.get("home/floordata",{
            cancelToken:this.source.token
        }).then(res => {
            this.setState({
                pictureList: res
            })
        })
    }
    // 优化:取消请求 
    componentWillUnmount(){
        this.source.cancel('取消分类菜单的请求');
      }
    render() {
        return (
            <div className="yg-home">
                {/* Top优购name */}
                <div className="yg-home-nav">
                    <NavBar className="home-nav">优购商城</NavBar>
                </div>
                {/* 搜索栏 */}
                <div className="yg-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 轮播图 */}
                <div className="yg-home-swiper">
                    <Carousel autoplay={true} infinite>
                        {this.state.swiper_list.map((val) => (
                            <div
                                onClick={this.handleSwiperClisk.bind(this, val.goods_id)}
                                key={val.goods_id}
                                style={{
                                    display: 'inline-block',
                                    width: '100%',
                                    height: this.state.imgHeight
                                }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div>
                {/* 分类导航页 */}
                <div className="yg-home-classification">
                    <div className="classification-item">
                        <Flex>
                            {
                                this.state.classification.map(v => {
                                    return <Flex.Item key={v.image_src}
                                        onClick={this.handleClassification}>
                                        <img src={v.image_src} alt="" />
                                    </Flex.Item>
                                })
                            }
                        </Flex>
                    </div>
                </div>
                {/* 商品类型 */}
                <div className="yg-home-pictureList">
                    {this.state.pictureList.map(v => {
                        return <div key={v.floor_title.image_src} className="productData-item">
                           {/* 标题 */}
                           <div className="product-title">
                                <img src={v.floor_title.image_src} alt="" />
                            </div>
                            {/* 图片列表 */}
                            <div className="product-image-list">
                                {
                                    v.product_list.map(vv=>{
                                        return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                            <img src={vv.image_src} alt=""/>
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                    })}
                </div>
            </div>
        );
    }
}

export default withRouter(index);
